<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getEmpJobDataApi, getEmpGenderDataApi } from "@/api/report";
import { ref } from "vue";

const dataList = ref([]);
const jobList = ref([]);
var myChart1, myChart2;
const getEmpJobData = async () => {
  const res = await getEmpJobDataApi();
  dataList.value = res.data.dataList;
  jobList.value = res.data.jobList;

  // 绘制图表
  myChart1.setOption({
    xAxis: { data: jobList.value },
    series: [{ data: dataList.value }],
    yAxis: {},
    series: [
      {
        type: "bar",
        data: dataList.value,
      },
    ],
  });
};
const getEmpGenderData = async () => {
  const { data } = await getEmpGenderDataApi();
  myChart2.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    color: ["#FE4173", "#0087D1"],
    series: [
      {
        name: "员工性别",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: data,
      },
    ],
  });
};

onMounted(async () => {
  getEmpJobData();
  getEmpGenderData();
  myChart1 = echarts.init(document.getElementById("main"));
  myChart2 = echarts.init(document.getElementById("gender"));
});
</script>

<template>
  <el-row>
    <el-col :span="12">
      <div id="main"></div>
    </el-col>
    <el-col :span="12">
      <div id="gender"></div>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
#main,
#gender {
  width: 100%;
  height: 500px;
  border-right: 1px dashed #ccc;
}
</style>
